<template>
 <el-scrollbar>
  <!-- 侧栏导航菜单 -->
  <el-menu unique-opened router :default-active="$route.path" :show-timeout="200" mode="vertical" :collapse="collapsed" 
   background-color="#2b313e" text-color="#7c8493" active-text-color="rgb(154, 206, 14)">
        <el-submenu index="/statis/data_statis">
        <template slot="title">
          <i class="iconfont icon-shujutongji"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item index="/statis/data_statis/water_quality">水质信息</el-menu-item>
        <el-menu-item index="/statis/data_statis/logic">水文信息</el-menu-item>
        <el-menu-item index="/statis/data_statis/xhtj">巡河统计</el-menu-item>
        <el-menu-item index="/statis/data_statis/event_statis">事件统计</el-menu-item>
        <el-menu-item index="/statis/data_statis/warn_statis">告警统计</el-menu-item>
      </el-submenu>
      <el-menu-item index="/statis/model_statis">
        <i class="iconfont icon-zuhemoxingfenxi"></i>
        <span slot="title">模型分析</span>
      </el-menu-item>
    </el-menu>
 </el-scrollbar>
</template>
<script>
export default {
  name:'affairNav',
 data(){
    return{
      collapsed:this.$store.state.collapsed,
      //loading:false,
    }
  },
  methods:{
    //折叠导航栏
    collapse:function(){
      this.collapsed=!this.collapsed;
      this.$store.state.collapsed=this.collapsed;
    },
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }
  },
  watch:{
    //监听路由改变时的路径来去
    // '$route':function(to,from){
    //   console.log('to.path',to.path)
    //   console.log('from.path',from.path)
    // }
  }
}
</script>